// @flow
import * as React from 'react';
import '../static/css/wallets.css';
import Headline from '../components/Headline';
import Subtitle from '../components/Subtitle';
import Summary from '../components/Summary';
import Account from '../components/Account';
import AddButton from '../components/AddButton';
import InputFrame from '../components/InputFrame';
import ModalFrame from '../components/ModalFrame';
import TradeList from '../components/TradeList';

import { Button } from 'antd';

import { EventEmitter } from "events";
const emitter = new EventEmitter()

import { inject, observer } from 'mobx-react';
import { observable } from "mobx";

const PropTypes = require('prop-types');

@inject('coins')
@observer
export default class Wallets extends React.Component<Props> {

  constructor(props) {
    super(props)
    let coins = this.props.coins.currentCoins
    this.state = {
      accountSummary: '帐户是密码保护的密钥，你可以持有 ' + coins + ' 币，且安全地基于电子的代币或硬币和控制合同。另外，帐户不能显示传入的事务。',
      accountContract: '一旦你拥有超过1个，你就可以创造更复杂的合约。钱包是一种基本的智能合约，它允许你的资金被多个帐户控制，并有一个可选的每日取款限额，以增加安全性。要创建您自己的自定义合约，请转到 <合约>。',
      addButtonText: '添加用户',
      placeholder: '请输入「邮箱地址」或者「手机号」查询用户详情...',
      buttonText: 'Open',
      modalContent: null,
    }
    this.clickButton = this.clickButton.bind(this)
  }

  clickButton() {
    this.setState({
      modalContent: <div>123</div>
    }, () => {
      // ajax
      this.refs.ModalFrame.showModal(this.state.modalContent);
    }) 
  }

  enterInput = (value) => {
    // console.log(value)
    this.setState({
      modalContent: <div>{value}</div>
      // ajax
    }, () => {
      this.refs.ModalFrame.showModal(this.state.modalContent);
    }) 
  }

  clickRecord = () => {
    this.setState({
      modalContent: <div>99854</div>
      // ajax
    }, () => {
      this.refs.ModalFrame.showModal(this.state.modalContent);
    }) 
  }



  render() {
    // console.log(this.props) 
    // console.log( new this.props.coins())
    // console.log( new this.props.coins().currentCoins)
    // console.log(this.context)

    return (
      <div className="wallets">
        <Headline boldName="账户" lightName="概述" />
        <Subtitle subtitle="关于账号" />
        <Summary summary={this.state.accountSummary} />
        <div className="content">
          <Account />
          <AddButton buttonText={this.state.addButtonText} />
          <InputFrame enterInput={this.enterInput} accountSign="From" placeholder={this.state.placeholder} />
          <Button type="primary" onClick={this.clickButton}>{this.state.buttonText}</Button>
          <ModalFrame ref="ModalFrame" modalContent={this.state.modalContent} />
        </div>
        <TradeList clickRecord={this.clickRecord} />
        

      </div>
    );
  }
}

// Wallets.contextTypes = {
//   coins: PropTypes.string
// };
